<template>
  <div class="common-choose-dialog-wrap">
    <span
      class="label"
      @click="showDialog"
      v-if="!tempVal"
      :style="{ '--theme-color': systemInfo.theme }"
      >请选择</span
    >

    <el-tag
      v-else
      style="cursor: pointer"
      type="success"
      closable
      @close="handleClose"
      @click="showDialog"
      >{{ tempVal }}</el-tag
    >

    <common-choose-dialog
      ref="ChooseDialog"
      :title="title"
      @submitForm="submitForm"
    >
      <common-tree
        slot="tree"
        :isRequest="isRequest"
        :treeLoading="treeLoading"
        :treeData="treeData"
        :treeProp="{ isLeaf: 'leaf' }"
        :current-node-key="currentNodeKey"
        :isShowFilter="false"
        setNodeByKey="leaf"
        isShowIconForNoChild
        is-slot
        @handleNodeClick="handleNodeClick"
      >
        <div slot-scope="{ scope }" class="tree-item-wrap">
          <common-carousel-text :content="scope.data.name" :font-size="14" />
        </div>
      </common-tree>

      <common-search slot="search" @search="handleQuery" @reset="resetQuery">
        <el-form
          @submit.native.prevent
          :model="queryForm"
          ref="queryForm"
          :inline="true"
          label-width="85px"
        >
          <el-form-item label="数据集名称">
            <common-input
              v-model="queryForm.name"
              clearable
              @enter="handleQuery"
            />
          </el-form-item>
        </el-form>
      </common-search>

      <common-table
        v-loading="listLoading"
        slot="content"
        ref="allList"
        :data="allList"
      >
        <el-table-column width="55" align="center">
          <template slot-scope="scope">
            <el-radio-group v-model="isCheckValue" @change="changeRadio">
              <el-radio :label="scope.row.id">{{ "" }}</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column
          label="数据集名称"
          align="left"
          prop="name"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="数据库类型"
          align="left"
          prop="datasourceType"
        />
        <!-- <el-table-column
          label="组织"
          align="left"
          prop="deptName"
          show-overflow-tooltip
        /> -->
      </common-table>
      <pagination
        slot="pagination"
        v-show="total > 0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="handleList"
      />
    </common-choose-dialog>
  </div>
</template>

<script>
import HandleChooseDialog from "@/mixins/modules/HandleChooseDialog";
import HandleSubmit from "@/views/screenConfig/dataSet/components/mixin/handleSubmit";
import BaseList from "@/mixins/BaseList";
import { _deepClone } from "@/utils";
import { getDataSetList, queryAllTree } from "@/api/screenConfig/dataSet";
import { mapGetters } from "vuex";

export default {
  name: "chooseDialog",
  mixins: [HandleChooseDialog, BaseList, HandleSubmit],
  props: {
    selectName: {
      type: String,
    }, //选中项名称
    selectId: {
      type: [String, Number],
    }, //选中项id
    classType: {
      type: [Number, String],
      default: 0, // 0数据集 1审计策略
    },
  },
  data() {
    return {
      dialogShow: false,
      title: "数据集",
      treeData: [],
      currentNodeKey: "",
      selectedData: [],
      queryForm: {
        id: "0",
        name: "",
        isDefault: 0,
        datasourceType: null,
        deptIds: null,
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      isCheckValue: "",
      key: "id",
      selectRow: null,
      tempVal: "",
    };
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  watch: {
    selectName: {
      handler: function (val) {
        if (val) {
          this.tempVal = _deepClone(this.selectName);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    //重置筛选条件
    resetQueryForm() {
      this.queryForm = {
        id: "0",
        name: "",
        isDefault: 0,
        datasourceType: null,
        deptIds: null,
        pageNum: 1,
        pageSize: 10,
      };
    },
    //部门数据
    getTreeList() {
      return new Promise((resolve, reject) => {
        queryAllTree({ classType: this.classType }).then((res) => {
          if (res && res.code === 200) {
            let treeData = [
              {
                id: "0-0",
                name: "预定义", // 名称
                isDefault: 1, // 1 预定义 0 自定义
                isRoot: true,
                leaf: false, // false 分类 true 数据集
                children: res.data.filter((item) => item.isDefault === 1),
              },
              {
                id: "0",
                name: "自定义",
                isDefault: 0,
                leaf: false,
                isRoot: true,
                children: res.data.filter((item) => item.isDefault === 0),
              },
            ];
            this.handleList();
            resolve(treeData);
          } else {
            this.queryForm.id = "";
            reject();
          }
        });
      });
    },

    //选择列表数据
    getList() {
      return new Promise((resolve, reject) => {
        getDataSetList({ ...this.queryForm, classType: this.classType }).then(
          (res) => {
            if (res && res.code === 200) {
              resolve({ list: res.rows, total: res.total });
            } else {
              this.allList = [];
              this.total = 0;
              this.handleListTips(res);
              reject();
            }
          }
        );
      });
    },
  },
  mounted() {
    // this.handleTreeList()
  },
};
</script>

<style scoped lang="scss">
.tree-item-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}
.common-choose-dialog-wrap {
  .label {
    font-size: 14px;
    color: var(--theme-color);
    cursor: pointer;
  }

  .name-list {
    cursor: pointer;

    .el-tag {
      margin-right: 4px;
    }
  }
}
</style>
